<template>
  <div class="search">
    <input type="text" @change="search" v-model="searchName">
    <div v-for="(item, index) in searchList" :key="index" v-html="item.name">
    </div>
  </div>
</template>

<script>
import { searchMovie } from '@/api/movie'
export default {
  data () {
    return {
      searchName: '',
      searchList: []
    }
  },
  methods: {
    async search () {
      const res = await searchMovie(this.searchName)
      const arr = res.data.data
      arr.forEach(item => {
        item.name = item.name.replace(new RegExp(this.searchName, 'ig'), `<span style="color: red;">${this.searchName}</span>`)
      })
      this.searchList = res.data.data
    }
  }
}
</script>

<style>

</style>
